<template>
  <div>
    <selectRoute ref="selectRoute" :name="name" @handleSelect="routeHandleSelect"></selectRoute>
    <selectArticle ref="selectArticle" @handleSelect="articleHandleSelect"></selectArticle>
    <selectItemList ref="selectItemList" @handleSelect="itemListHandleSelect"></selectItemList>
    <selectTemplate ref="selectTemplate" @replaceTemplate="replaceTemplate"></selectTemplate>
    <!-- 操作按钮 -->
    <div style="margin-left: 20px;" v-if="changeLesseeStatus=='Y'">
      <el-button @click="saveAsTemplate" size="mini">保存为模版</el-button>
    </div>
    <!-- 内容区域样式 -->
    <div v-if="userModel.role=='admin'||changeOpenshopStatus=='Y'">{{nodeModel.id}}</div>
    <placeBanner v-if="name=='banner'" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @selectRoute="selectRoute" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeBanner>
    <placeGrid v-if="name=='grid'" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @selectRoute="selectRoute" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeGrid>
    <placeNoticebar v-if="name=='noticebar'" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeNoticebar>
    <placeRichtext v-if="name=='richtext'" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeRichtext>
    <placeShare v-if="name=='share'" :nodeModel="nodeModel" @selectRoute="selectRoute" @selectTemplate="selectTemplate"></placeShare>
    <placeItemBaseinfo v-if="name=='item-baseinfo'" :nodeModel="nodeModel" @selectTemplate="selectTemplate"></placeItemBaseinfo>
    <placeItemDetail v-if="name=='item-detail'" :nodeModel="nodeModel" @selectTemplate="selectTemplate"></placeItemDetail>
    <placeItemCate v-if="name=='itemCate'" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @selectRoute="selectRoute" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeItemCate>
    <placeItemList v-if="name=='itemList'" ref="placeItemList" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @selectItemList="selectItemList" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeItemList>
    <placeNavBar v-if="name=='navBar'" :nodeModel="nodeModel" @selectTemplate="selectTemplate"></placeNavBar>
    <placeNavBarLocation v-if="name=='navBar-location'" :nodeModel="nodeModel" @selectTemplate="selectTemplate"></placeNavBarLocation>
    <placeSearchBar v-if="name=='searchBar'" :nodeModel="nodeModel" @selectTemplate="selectTemplate"></placeSearchBar>
    <placeShopCheckin v-if="name=='shopCheckin'" :nodeModel="nodeModel" @selectTemplate="selectTemplate"></placeShopCheckin>
    <placeShopTabs v-if="name=='shopTabs'" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @selectRoute="selectRoute" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeShopTabs>
    <placeTitle v-if="name=='title'" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @selectRoute="selectRoute" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeTitle>
    <placeArticle v-if="name=='article'" ref="placeArticle" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @selectArticle="selectArticle" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeArticle>
    <placeMap v-if="name=='map'" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @selectRoute="selectRoute" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeMap>
    <placeText v-if="name=='text'" :nodeModel="nodeModel" @insertAdvert="insertAdvert" @selectRoute="selectRoute" @deleteAdvert="deleteAdvert" @selectTemplate="selectTemplate"></placeText>
    <placeCustom v-if="name=='custom'" :nodeModel="nodeModel"></placeCustom>
  </div>
</template>

<script>
import {
  findItemListRemoveActivity
} from '@/api/merchant/item.js'
import selectRoute from './components/selectRoute'
import selectArticle from './placeRight/components/selectArticle/index.vue'
import selectItemList from './placeRight/components/selectItemList/index.vue'
import selectTemplate from './placeRight/components/selectTemplate/index.vue'
import {count} from '@/utils/count.js'
import {tools} from '@/utils/tools.js'
import custom from '@/components/jcupload/custom'
import placeBanner from '@/views/interface/composing/placeRight/place-banner'
import placeGrid from '@/views/interface/composing/placeRight/place-grid'
import placeNoticebar from '@/views/interface/composing/placeRight/place-noticebar'
import placeRichtext from '@/views/interface/composing/placeRight/place-richtext'
import placeItemGrid from '@/views/interface/composing/placeRight/place-itemGrid'
import placeShare from '@/views/interface/composing/placeRight/place-share'
import placeItemBaseinfo from '@/views/interface/composing/placeRight/place-item-baseinfo'
import placeItemDetail from '@/views/interface/composing/placeRight/place-item-detail'
import placeItemCate from '@/views/interface/composing/placeRight/place-itemCate'
import placeItemList from '@/views/interface/composing/placeRight/place-itemList'
import placeNavBar from '@/views/interface/composing/placeRight/place-navBar'
import placeNavBarLocation from '@/views/interface/composing/placeRight/place-navBar-location'
import placeSearchBar from '@/views/interface/composing/placeRight/place-searchBar'
import placeShopCheckin from '@/views/interface/composing/placeRight/place-shopCheckin'
import placeShopTabs from '@/views/interface/composing/placeRight/place-shopTabs'
import placeTitle from '@/views/interface/composing/placeRight/place-title'
import placeArticle from '@/views/interface/composing/placeRight/place-article'
import placeMap from '@/views/interface/composing/placeRight/place-map'
import placeText from '@/views/interface/composing/placeRight/place-text'
import placeCustom from '@/views/interface/composing/placeRight/place-custom'
export default {
  components: {
    selectRoute,
    selectArticle,
    selectItemList,
    selectTemplate,
    custom,
    placeBanner,
    placeGrid,
    placeNoticebar,
    placeRichtext,
    placeItemGrid,
    placeShare,
    placeItemBaseinfo,
    placeItemDetail,
    placeItemCate,
    placeItemList,
    placeNavBar,
    placeNavBarLocation,
    placeSearchBar,
    placeShopCheckin,
    placeShopTabs,
    placeTitle,
    placeArticle,
    placeMap,
    placeText,
    placeCustom
  },
  props:{
    name: {
      type: String,
      default : ''
    },
    nodeModel:{
        type: Object,
        default: ()=>{}
      },
  },
  computed: {
    changeLesseeStatus: {
      get() {
        return localStorage.getItem('changeLesseeStatus')
      }
    }
  },
  data() {
    return {
      selectAdert: {}, //标记选择的advert
      userModel: {},
      changeOpenshopStatus: ''
    }
  },
  created(){
    this.userModel = this.$store.state.user.userModel
    this.changeOpenshopStatus = localStorage.getItem('changeOpenshopStatus')
  },
  methods:{
    // 追加advert
    insertAdvert(e){
      console.log('添加item', e)
      if(e.name=='itemGrid'){
        var newAdvert = {
          itemName: '',
          coverUrl: '',
          price: '',
          marketPrice: '',
          sales: '',
          itemModel: {},
        }
        this.nodeModel.advertList.push(newAdvert)
      }else{
        var newItem = {
          title: '',
          content: '',
          coverUrl: '',
          itemModel: {},
          types: e.types,
          filter: ''
        }
        if(this.nodeModel.configDict.itemList.length>0){
          newItem.sort = count.add(this.nodeModel.configDict.itemList[this.nodeModel.configDict.itemList.length-1].sort, 1)
        }else{
          newItem.sort = 0
        }
        this.nodeModel.configDict.itemList.push(newItem)
      }
      
    },
    //删除advert
    deleteAdvert(e){
      this.$alert('确定删除吗？', {
        confirmButtonText: '确定',
        callback: action => {
          if(action == 'confirm'){
            this.nodeModel['deleteAdvert'] = true
            this.nodeModel.configDict.itemList.splice(e, 1)
          }
        }
      })
    },
    // 选择路由
    selectRoute(e, types){
      console.log('选择路由', e, types)
      this.selectAdert = e
      this.selectAdert.types = types
      // 处理回显富文本
      var query = this.selectAdert.query
      if(query){
        if(query.routeName=='protocolView'){
          this.$refs.selectRoute.richtext = JSON.parse(query).content
        }
      }
      this.$refs.selectRoute.show()
    },
    // 选择路由回调
    routeHandleSelect(query){
      this.$set(this.selectAdert, 'query', query)
    },
    // 选择文章展示
    selectArticle(e){
      this.selectAdert = e
      this.$refs.selectArticle.show()
    },
    // 选择文章展示回调
    articleHandleSelect(query){
      this.$set(this.selectAdert, 'query', query)
    },
    // 选择商品列表
    selectItemList(e){
      this.selectAdert = e
      this.$refs.selectItemList.show()
    },
    // 选择商品列表回调
    itemListHandleSelect(query){
      this.$set(this.selectAdert, 'query', query)
    },
    // 选择模版
    selectTemplate(){
      this.$refs.selectTemplate.node = this.nodeModel
      this.$refs.selectTemplate.componentModel = this.nodeModel.componentModel
      this.$refs.selectTemplate.show()
    },
    // 替换模版
    replaceTemplate(e){
      this.$set(this.nodeModel, 'config', e.config)
      this.$set(this.nodeModel, 'configDict', JSON.parse(e.config))
    },
    // 保存为模版
    saveAsTemplate(){
      this.request_post('interface/node/createAction/', {
        isTemplate: 1,
        component: this.nodeModel.component,
        config: this.nodeModel.config
      }).then(res => {
        if (res.data.code == 10000) {
          this.$message({
              message: '保存成功',
              type: 'success'
          })
        }
      });
    },
    // 查询商品列表
    findItemListRemoveActivity(filter) {
      var searchParams = {}
      searchParams.page = 1
      searchParams.size = 6
      searchParams = Object.assign(tools.paramsToObj(filter), searchParams)
      findItemListRemoveActivity(searchParams).then(res => {
        if(res.data.code == 10000){
          this.nodeModel.itemList = res.data.data.list
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.row{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20px;
  margin-top: 10px;
}
</style>
    